<template>
	<view class="all">
		<view class="one" v-for="(item,index) of list" :key="index" @click="open(item)">
			<view class="one_info">
				<text class="one_title">{{item.name}}</text>
				<text class="info">{{item.remark}}</text>
			</view>
			<image class="cell_icon" src="/static/images/user/kefurexian.png" mode=""></image>
		</view>
		<uni-popup ref="popupCell" type="center">
			<view class="popup_cell">
				<text class="popup_cell_title">{{popupTitle}}</text>
				<view class="popup_cell_one" @click="checkOnePhone(1)">
					<image class="popup_cell_one_icon" src="/static/images/home/cell.png" mode=""></image>
					<text class="popup_cell_one_phone">{{tellone}}</text>
				</view>
				<view class="popup_cell_one" @click="checkOnePhone(2)">
					<image class="popup_cell_one_icon" src="/static/images/home/cell.png" mode=""></image>
					<text class="popup_cell_one_phone">{{telltwo}}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {publicInfoData} from '@/Service/homeService.js';
	export default {
		components:{uniPopup},
		data() {
			return {
				currentPage:1,
				size:10,
				total:0,
				list:[],
				chooseOne:null,
				popupTitle:'',
				tellone:'',
				telltwo:'',
				cellPhone:''
			}
		},
		onLoad() {
			this.getPublicInfoData()
		},
		onPullDownRefresh() {
			console.log('下拉刷新')
			this.currentPage = 1
			this.total = 0
			this.list = []
			this.getPublicInfoData()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		onReachBottom() {
			console.log('上拉加载')
			if(this.list.length < this.total){
				this.currentPage++
				this.getPublicInfoData()
			}else{
				console.log('没有更多数据了')
			}
		},
		methods: {
			cell(){
				uni.makePhoneCall({
					phoneNumber: this.cellPhone
				});
			},
			checkOnePhone(num){
				if(num == 1){
					uni.makePhoneCall({
						phoneNumber: this.tellone
					});
				}else{
					uni.makePhoneCall({
						phoneNumber: this.telltwo
					});
				}
			},
			open(item){
				if(item.tel2 == null || item.tel2 == ""){
					this.cellPhone = item.tel1
					this.cell()
				}else{
					this.chooseOne = item
					this.popupTitle = item.name
					this.tellone = item.tel1
					this.telltwo = item.tel2
					this.$refs.popupCell.open();
					// if(item.tel1.search("0") == 0){
					// 	console.log(item.tel1)
					// 	let a = item.tel1
					// 	var newStr = a.slice(0,5)+'-'+a.slice(5)
					// 	console.log(newStr)
					// }
					
				}
				
			},
			//获取数据
			getPublicInfoData(){
				let self = this
				let params = {
					currentPage:self.currentPage,
					size:self.size,
				}
				publicInfoData(params).then((ret) => {
					console.log(JSON.stringify(ret))
					self.total = ret.data.total
					self.list.push(...ret.data.records)
				}).catch((err) => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page{
		font-family: Source Han Sans CN;
		background-color: #F8F8F8;
	}
	.all{
		padding: 20upx 30upx;
	}
	.one{
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 25upx 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30upx;
	}
	.one_info{
		display: flex;
		flex-direction: column;
	}
	.one_title{
		display: block;
		font-size: 32upx;
		color: #151515;
	}
	.info{
		display: block;
		font-size: 26upx;
		color: #a1a8b6;
		margin-top: 12upx;
		width: 520upx;
		text-align: justify;
	}
	.cell_icon{
		width: 60upx;
		height: 60upx;
	}
	
	.popup_cell{
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 0 25upx 10upx 25upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.popup_cell_title{
		display: block;
		font-size: 32upx;
		color: #333333;
		line-height: 117upx;
	}
	.popup_cell_one{
		width: 590upx;
		height: 114upx;
		border-radius: 10upx;
		background-color: #F8F8F8;
		display: flex;
		align-items: center;
		margin-bottom: 35upx;
	}
	.popup_cell_one_icon{
		width: 50upx;
		height: 50upx;
		margin: 0 65upx 0 30upx;
	}
	.popup_cell_one_phone{
		display: block;
		font-size: 46upx;
		color: #5685F7;
	}
</style>
